<template>
  <div class="container">
      <div class="card">
          <el-breadcrumb separator="/" class="card-body">
              <el-breadcrumb-item :to="{ path: '/AdminHome' }"><i class="el-icon-location"></i>首页</el-breadcrumb-item>
              <el-breadcrumb-item :to="{ path: '/SystemSetting/StorageLocation' }">储存位置管理</el-breadcrumb-item>
              <el-breadcrumb-item>{{ this.$route.meta.title }}</el-breadcrumb-item>
          </el-breadcrumb>
      </div>
      <div class="card">
          <div class="card-header">填写分类信息</div>
          <div class="card-body clearfix">
              <div style="float:left;width:100%;">
                  <el-form ref="form" :model="form" :rules="rules" label-width="120px">
                      <div class="info-ruleForm">
                          <el-form-item label="组织编码">
                              <el-input v-model="form.code" disabled placeholder="生成编码失败,请刷新页面"></el-input>
                          </el-form-item>
                          <el-form-item label="组织名称" prop="label">
                              <el-input v-model.lazy="form.label" placeholder="请输入组织名称" @blur="isDepartmentExist(form.label)"></el-input>
                          </el-form-item>
                          <el-form-item label="所属上级">
                              <el-input v-model="uplv" placeholder="请选择组织名称,不选择则为根组织" maxlength="0" ref="sssj"></el-input>
                              <el-button type="text" size="medium" class="el-query-tree" @click="$tree('查找组织','sssj')">查找</el-button>
                          </el-form-item>
                          <el-form-item label="设置部门责任人" prop="chargeUsers">
                              <input v-model="form.chargeUsers" disabled hidden>
                              <div class="setPosition">
                                  <span v-for="(p,index) in userTreeData" :key="p.index">{{ p.name }}<i class="el-icon-close" @click="delPosition(index)"></i></span>
                              </div>
                              <el-button type="text" size="medium" class="el-query-tree" @click="$tree('查找责任人','czzrr')">查找</el-button>
                          </el-form-item>
                      </div>
                      <hr>
                      <div class="info-ruleForm">
                          <el-form-item>
                              <el-button type="primary" @click="onSubmit('form')">保存</el-button>
                              <el-button @click="goBack">返回上一级</el-button>
                          </el-form-item>
                      </div>
                  </el-form>
              </div>
          </div>
      </div>
  </div>
</template>

<script>
import request from "@/utils/request";
export default {
  name: "GroupAdd",
  data() {
    return {
      form: {
        label: "",
        code: "",
        parentLabel: "",
        parentId: "",
        chargeUsers: '',
      },
      rules: {
        label: [
          { required: true, message: "请输入部门名称", trigger: "blur" },
          { min: 2, max: 20, message: "长度在 2 到 20 个字符", trigger: "blur" }
        ]
      }
    };
  },
  methods: {
    onSubmit(formName) {
      var data = this.form;
      this.$refs[formName].validate(valid => {
        if (valid) {
          console.log(this.form);
          if (this.form.chargeUsers == "") {
            this.$message.error("至少设置一个部门责任人");
          } else {
            request({
              url: this.$api.createOganization,
              method: "post",
              data: data
            }).then(res => {
              //判断成功
              if (res.code !== "000000") {
                this.$message.error(res.msg);
              } else {
                this.$message.success("创建成功,返回上一页!");

                this.goBack();
                //重置并清空表单
                this.$store.state.userTreeData = ""
                this.getGenerateCode();
                this.resetForm("form");
                this.form.chargeUsers= '';
              }
            });
          }
        } else {
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    goBack() {
      this.$router.go(-1);
    },
    delPosition(i) {
      //删除该部门负责人
      let perData = this.form.chargeUsers;
      perData.splice(i, 1); //删除数组中下标为 i 的元素
      this.form.person = perData;
      console.log(perData);
    },
    //自动获取编码
    getGenerateCode() {
      request({
        url: this.$api.getGenerateCode,
        method: "get"
      }).then(res => {
        this.form.code = res.data;
      });
    },
    //校验组织名字是否承载
    isDepartmentExist(label) {
      if (label !== "") {
        request({
          url: this.$api.isDepartmentExist + "?label=" + label,
          method: "get"
        });
      }
    }
  },
  mounted() {
    this.getGenerateCode();
    this.resetForm("form");
    //初始化
    this.$store.state.userTreeData = ""
  },
  destroyed () {
    this.$store.state.userTreeData = ""
  },
  computed: {
    //上级菜单
    uplv: function() {
      if (this.$store.getters.treeData.ref !== "sssj") {
        return this.form.parentLabel;
      } else {
        this.form.parentId = this.$store.getters.treeData.id;
        return (this.form.parentLabel = this.$refs.sssj.value = this.$store.getters.treeData.val);
      }
    },
    userTreeData:function () {
      return this.form.chargeUsers = this.$store.getters.userTreeData;
    }
  }
};
</script>

<style lang="less" scoped>
.classfy-tree {
  width: 220px;
  float: left;
  position: relative;
  z-index: 1;
  background: #f9fafc;
  border-right: 1px solid #ebeef5;
  .card-header {
    border-bottom: 1px solid #e4e6e9;
  }
  .el-tree {
    padding: 10px;
    background: transparent !important;
  }
}

.el-tree-node:focus > .el-tree-node__content {
  background-color: #4674d6 !important;
}

.el-tree-node__content:hover {
  background-color: #ddd;
}

.classfy-data {
  padding-left: 221px;
  position: relative;
  z-index: 0;
  .card-header {
    line-height: 51px;
    height: 54px;
  }
  .e_inner_text {
    color: #000;
    font-size: 18px;
    line-height: 54px;
  }
}

.info-ruleForm {
  margin: 0 auto;
}

.setPosition {
  background-color: #fff;
  background-image: none;
  border-radius: 4px;
  min-height: 60px;
  border: 1px solid #dcdfe6;
  padding: 0 10px;
  span {
    background: #f9f9f9;
    padding: 3px;
    margin-right: 10px;
    margin-top: 5px;
    border-radius: 30px;
    display: inline-block;
    line-height: 1;
    .el-icon-close {
      font-size: 12px;
      margin-left: 5px;
      margin-right: 4px;
      background: #ddd;
      padding: 1px;
      cursor: pointer;
      border-radius: 10px;
      color: #000;
    }
    .el-icon-close:hover {
      background: @theme;
      color: #fff;
    }
  }
}
</style>